<template>
	<view class="item">
		<view class="topbar">
			<text class="back" @tap="goback()"> < </text>
			<text>乐居</text>
		</view>
		<view class="content">
			<view class="row">
				<view class="left">收件人</view>
				<view class="right">
					<input type="text" placeholder="请输入收件人姓名" v-model="name">
				</view>
			</view>
			<view class="row">
				<view class="left">电话号码</view>
				<view class="right">
					<input type="text" placeholder="请输入收件人电话" v-model="tel">
				</view>
			</view>
			<view class="row">
				<view class="left">所在地区</view>
				<view class="right">
					<text class="txt" @tap="chooseArea">{{areaData.lable}}</text>
				</view>
			</view>
			<view class="row">
				<view class="left">详细地址</view>
				<view class="right">
					<input type="text" placeholder="请输入详细地址" v-model="detail">
				</view>
			</view>
			<view class="row">
				<view class="left">设置默认地址</view>
				<view class="right btn">
					<switch @change="isdefault" :checked="ischecked"/>
				</view>
			</view>
		</view>
		<view class="btns">
			<button @tap="del" class="del">删除地址</button>
			<button @tap="edit" class="edit">修改地址</button>
			<button @tap="save" class="save">保存地址</button>
		</view>
		<mpvue-city-picker
		  :themeColor="themeColor"
		  ref="mpvueCityPicker"
		  :pickerValueDefault="cityPickerValue"
		  @onCancel="onCancel"
		  @onConfirm="onConfirm"
		></mpvue-city-picker>
	</view>
</template>

<script>
	import mpvueCityPicker from "@/components/mpvue-citypicker/mpvueCityPicker.vue";
	import { saveAddress,deladdress,update } from '../../../api/address/newAddress.js'
	export default {
		name: "AddressEdit",
		components: {
		  mpvueCityPicker
		},
		data() {
			return {
				name:'',
				tel:'',
				detail:'',
				ischecked:false,
				cityPickerValue: [0,0,0],
				themeColor: "#007AFF",
				areaData:{ lable:"请点击选择地址", value:[], cityCode:'' },
				addressItem:{},
				itemId:''
			};
		},
		onLoad(option) {
			if(option){
				this.addressItem = JSON.parse(option.addressItem)
				// console.log(this.addressItem)
				this.name = this.addressItem.name
				this.tel = this.addressItem.tel
				this.areaData.lable = this.addressItem.provinceStr+'-'+this.addressItem.cityStr+'-'+this.addressItem.areaStr
				this.detail = this.addressItem.cityBak
				this.itemId = this.addressItem.id
				if(this.addressItem.isUse==='1'){
					this.ischecked = true
				}else{
					this.ischecked = false
				}
			}
		},
		methods:{
			isdefault(e){
				// console.log(e)
				this.ischecked = e.detail.value
			},
			onCancel(e){
				// console.log(e);
			},
			onConfirm(e){
				// console.log(e);
				this.areaData = e
				this.areaData.lable = e.label
			},
			chooseArea(){
				this.$refs.mpvueCityPicker.show()
			},
			goback(){
				uni.navigateBack({
				    delta: 1
				});
			},
			edit(){
				update({
					id:this.itemId
				})
				.then(res=>{
					console.log(res);
					uni.showToast({
					    title: '接口调用不成功',
					    duration: 1000,
						// success: () => {
							
						// }
					});
					// setTimeout(function(){
					// 	uni.navigateBack({
					// 	    delta: 1
					// 	});
					// },1000)
				})
			},
			del(){
				deladdress({
					id:this.itemId
				})
				.then(res=>{
					// console.log(res);
					uni.showToast({
					    title: '删除成功',
					    duration: 1000
					});
					setTimeout(function(){
						uni.navigateBack({
						    delta: 1
						});
					},1000)
				})
			},
			save(){
				const value = uni.getStorageSync('userData');
				const userdata = JSON.parse(value)
				// console.log(userdata)
				saveAddress({
					userId:'bdecbb72264e4ec581061d4770a2e914',
					tag:'公司',
					cityCode:this.areaData.cityCode+','+this.areaData.value[0]+','+this.areaData.value[1]+','+this.areaData.value[2],
					provinceStr:this.areaData.label.split('-')[0],
					cityStr:this.areaData.label.split('-')[1],
					areaStr:this.areaData.label.split('-')[2],
					cityBak:this.detail,
					name:this.name,
					tel:this.tel,
					isUse:this.ischecked === true? '1' : '0',
					region_arr:this.areaData.value[0]+','+this.areaData.value[1]+','+this.areaData.value[2]
				})
				.then(res=>{
					console.log(res)
					uni.showToast({
					    title: '地址保存成功',
					    duration: 1000
					});
					setTimeout(function(){
						uni.navigateBack({
						    delta: 1
						});
					},1000)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item{
		position: relative;
		.topbar{
			position: relative;
			left: 0;
			top: 0;
			background-color: #354e44;
			color: #fff;
			width: 100%;
			height: 44px;
			line-height: 44px;
			text-align: center;
			z-index: 998;
			.back{
				font-size: 24px;
				position: absolute;
				left: 20px;
			}
		}
		.content{
		    display: flex;
		    flex-wrap: wrap;
			.row{
				display: flex;
			    width: 94%;
			    margin: 0 3%;
			    border-top: solid 0.5px #eee;
				.left{
					width: 30%;
				    height: 60px;
					line-height: 60px;
				    font-weight: 200;
				    font-size: 15px;
				    align-items: center;
				}
				.right{
				    width: 70%;
				    align-items: center;
				    font-size: 15px;
					input{
					    display: block;
					    font-size: 16px;
					    height: 60px;
						box-sizing: border-box;
					    line-height: 60px;
					    min-height: 1.4em;
					    overflow: hidden;
					}
					.txt{
						height: 60px;
						line-height: 60px;
					}
					&.btn{
						position: relative;
						switch{
							position: absolute;
							top: 50%;
							right: 5px;
							transform: translate(0,-50%);
						}
					}
				}
			}
		}
		.btns{
			display: flex;
			button{
			    background: rgb(0, 85, 255);
			    color: rgb(255, 255, 255);
				border-radius: 2.5rem;
				box-shadow: 0 0 30px 0 rgba(0,0,0,.2);
				transition: all 0.4s;
			    font-size: 15px;
			    width: 100px;
			    height: 50px;
			    line-height: 50px;
			    text-align: center;
			    margin-left: auto;
			    margin-right: auto;
			    overflow: hidden;
				position: relative;
				top: 200px;
			    padding-left: 14px;
			    padding-right: 14px;
			    box-sizing: border-box;
				&.del{
					background: rgb(255, 85, 0);
				}
				&.edit{
					background: rgb(255, 170, 0);
				}
			}
		}
	}
</style>
